<template>
    <div>
        <ul>
            <li class=" flex"> <span class="grow">我的待办数量（已完成/总数）</span> <span>{{count_data?.todos_completed_count}}/{{count_data?.todos_count}}</span></li>
            <li class=" flex"> <span class="grow">我的消息数量（已阅读/总数）</span> <span>{{count_data?.messages_read_count}}/{{count_data?.messages_count}}</span></li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { UsersApi } from '../../../api';
let count_data = ref<{
    todos_count: number,
    todos_completed_count: number,
    messages_count: number,
    messages_read_count: number,
}>(
    {
        todos_count: 0,
        todos_completed_count: 0,
        messages_count: 0,
        messages_read_count: 0,
    }
)
//fetchdata
async function fetchData() {
    count_data.value=(await UsersApi.getAccountIndex()).data
}
fetchData()
</script>

<style scoped>

</style>